<template>
  <div class="strut-div">
    <div class="card-item" style="height:340px;">
      <p class="card-title">科研项目所属部门</p>
      <div class="card-div">
        <common-pieNew-chart ref="techProjectPie" :config='techProjectPieConfig'></common-pieNew-chart>
      </div>
    </div>
    <div class="card-item" style="height:290px;margin-top:20px;">
      <p class="card-title">
        <span>科研项目列表</span>
        <span class="showDetailTxt" @click='showTechDialog("科研项目列表",1)'>查看详情</span>
      </p>
      <div class="card-div">
        <common-table ref="techTableList" :config="techTableListConfig"></common-table>
      </div>
    </div>
    <div class="card-item" style="height:322px;margin-top:20px; display: none;">
      <p class="card-title">专利成果所属部门</p>
      <div class="card-div">
        <common-pieNew-chart ref="techPatentPie" :config='techPatentPieConfig'></common-pieNew-chart>
      </div>
    </div>
    <div class="card-item" style="height:322px;margin-top:20px;">
      <p class="card-title">
        <span>专利成果列表</span>
        <span class="showDetailTxt" @click='showTechDialog("专利成果列表",2)'>查看详情</span>
      </p>
      <div class="card-div">
        <common-table ref="techPatentTable" :config="techPatentTableConfig"></common-table>
      </div>
    </div>

    <el-dialog :title="dialigTitle" :visible.sync="dialogShow" width="1000px" :modal="false">
      <common-table ref="techDetailTable" :config="techDetailConfig"></common-table>
    </el-dialog>
  </div>
</template>
<script>
  import CommonPieNewChart from '@/components/common/common-pieNew-chart.vue';
  import CommonTable from "@/components/common/common-table.vue";
  import {
    unitSum,
    patentDepartSum,
    departmentDetail,
    patentDetails,
    sexRatio
  } from '@/network/tg-fake-data.js';

  export default {
    name: 'sx-tech-right',
    components: {
      CommonPieNewChart,
      CommonTable
    },
    data() {
      return {
        dialogShow: false,
        dialigTitle:'',
        techProjectPieConfig: {
          option: {
            title: '',
            id: 'techProjectPie',
            color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
            tooltip: {
              show: true,//防止鼠标移到不需要的数据上弹出label
              trigger: 'item',
              formatter: "{a} {b} : {c} ({d}%)"
            },
            series: [{
              name: '',
              type: 'pie',
              radius: [50, 100],
              center: ['50%', '50%'],
              avoidLabelOverlap: true,
              label: {
                formatter: '{a} {b} :{d}%',
                fontSize: 16
              },
              labelLine: {
                length: 20,
                length2: 50,
              },
              data: []
            }]
          }
        },
        techPatentPieConfig: {
          option: {
            title: '',
            id: 'techPatentPie',
            color: ['#7264F7', '#AC4BFC', '#EDA652', '#08C49A', '#19AEF1', '#00EAFF'],
            tooltip: {
              show: true,//防止鼠标移到不需要的数据上弹出label
              trigger: 'item',
              formatter: "{a} {b} : {c} ({d}%)"
            },
            series: [{
              name: '',
              type: 'pie',
              radius: [50, 100],
              center: ['50%', '50%'],
              label: {
                color: "#fff",
                formatter: '{a} {b} :{d}%'
              },
              labelLine: {
                length: 10,
                length2: 40,
              },
              data: []
            }]
          }
        },
        techTableListConfig: {
          option: {
            id: 'techTableList',
            height: 220,
            tableColor: '#6BEEFF',
            tableHeader: [{
              prop: "source",
              title: "课题名"
            }, {
              prop: "name",
              title: "课题名称",
            }, {
              prop: "author",
              title: "课题主持人",
              width:80,
            }, {
              prop: "department",
              title: "所属部门",
            }, {
              prop: "text",
              title: "研究内容",
            },],
            tableData: []
          }
        },
        techPatentTableConfig: {
          option: {
            id: 'techPatentTable',
            height: 252,
            tableColor: '#6BEEFF',
            tableHeader: [{
              prop: "name",
              title: "专利名称"
            }, {
              prop: "author",
              title: "发明人",
              width:65,
            }, {
              prop: "depart",
              title: "所属部门",
            }, {
              prop: "type",
              title: "专利类型",
              width:85,
            }, {
              prop: "range",
              title: "专利范围",
              width:80,
            }, {
              prop: "related",
              title: "专利发明（设计）人",
            }, {
              prop: "code",
              title: "证书号",
            }],
            tableData: []
          }
        },
        techDetailConfig: {
          option: {}
        }
      }
    },
    mounted() {
      this.techProjectPieConfig.option.series[0].data = unitSum.series.map((item, index) => {
        return {
          value: item,
          name: unitSum.category[index]
        }
      });
      this.techPatentPieConfig.option.series[0].data = patentDepartSum.series.map((item, index) => {
        return {
          value: item,
          name: patentDepartSum.category[index]
        }
      });

      this.$refs.techProjectPie.initChart();
      this.$refs.techPatentPie.initChart();

      this.getTable();
    },
    methods: {
      getTable() {
        this.techTableListConfig.option.tableData = departmentDetail;
        this.$refs.techTableList.initTable();

        this.techPatentTableConfig.option.tableData = patentDetails;
        this.$refs.techPatentTable.initTable();
      },
      showTechDialog(title,type) {
        this.dialigTitle = title;
        this.dialogShow = true;

        this.$nextTick(function() {
          let targetObj = type == 1 ? this.techTableListConfig.option : this.techPatentTableConfig.option
          let _option = Object.assign({}, targetObj, {id:'techDetailTable',height: 600});

          this.techDetailConfig.option = _option;
          this.$refs.techDetailTable.initTable();
        });
      }
    }
  }

</script>
<style lang="scss" scoped>
  .showDetailTxt {
    float: right;
    margin-right: 20px;
    cursor: pointer;
  }
</style>
